<template>
    <div class="custom-header" style="position: relative">
        <!-- 菜单收起的这个功能没有做，需要的话在做吧 -->
        <i class="el-icon-s-unfold collapsed" @click="changeStatus(false)" v-if="$store.state.collapsed"></i>
        <i class="el-icon-s-fold collapsed" @click="changeStatus(true)" v-else></i>
        <div class="router-title">抖音短视频营销系统 <i class="el-icon-arrow-right"></i> {{title}}</div>
        <div class="custom-header-right">
            <el-dropdown @command="handleCommand">
				<span class="custom-white">
					天网短视频获客系统
				</span>
				<span class="custom-white">
					<i class="el-icon-setting custom-white" style="margin-right: 5px"></i>
					{{userinfo.username}}
				</span>
                <el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="exit">退出</el-dropdown-item>
                    <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <update-password v-if="showModal" ref="myModal"></update-password>
    </div>
</template>

<script>
    import UpdatePassword from "@/components/UpdatePassword";

    export default {
        name: "CustomHeader",
        components: {
            UpdatePassword
        },
        data() {
            return {
                showModal: false,
                title: '',
				userinfo:{},
            };
        },
        watch: {
            $route: {
                handler: function (val) {
                    this.title = val.meta.title;
                },
                // 深度观察监听
                deep: true
            }
        },
        mounted() {
			
			if(window.sessionStorage.getItem("userinfo")){
				 this.userinfo=JSON.parse(window.sessionStorage.getItem("userinfo"));
				
			}
			
            this.title = this.$route.meta.title;
        },
        methods: {
            changeStatus(bool) {
                this.$store.commit("setCollapsed", bool);
            },

            handleCommand(command) {
                console.log(command)
                if (command === 'exit') { // 退出
                    this.$confirm('退出当前登录账号, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
						
						setTimeout(() => {
						    sessionStorage.clear(); // 把所有的缓存都删除
						    this.$store.commit('setToken', '');
						    this.$store.commit('menu/setMenu', []);
						    this.$router.replace({
						        path: "/login"
						    });
						}, 1500)
                       /* this.axios.get('/logout').then(response => {
                            this.$message({
                                type: 'success',
                                message: '退出成功'
                            })

                            setTimeout(() => {
                                sessionStorage.clear(); // 把所有的缓存都删除
                                this.$store.commit('setToken', '');
                                this.$store.commit('menu/setMenu', []);
                                this.$router.replace({
                                    path: "/login"
                                });
                            }, 1500)
                        }) */
                    }).catch(() => {
                        console.log('取消退出');
                    });

                } else if (command === 'updatePassword') { // 修改密码
                    this.showModal = true;
                    this.$nextTick(() => {
                        this.$refs.myModal.init();
                    })
                }
            }
        },
    };
</script>

<style scoped lang="scss">
    .router-title {
        line-height: 42px;
        color: #ffffff;
        position: absolute;
        top: 0;
        left: 35px;
        letter-spacing: 1px;
    }
</style>
